<template>
  <div class="positionUser-page">
    <MainHead title="指标审核"
              @change="getPageList()" />
    <el-card class="main-card"
             shadow="never"
             v-loading="loading">
      <div class="search">
        <div></div>
        <div>
          <el-input style="width: 264px; margin-right: 10px"
                    placeholder="请输入关键字"
                    prefix-icon="el-icon-search"
                    v-model="formData.keyword"></el-input>
          <el-button type="primary"
                     @click="getPageList()">搜索</el-button>
          <Search :config="searchConfig"
                  @change="searchChange"
                  style="margin-left: 10px" />
        </div>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                class="page-table"
                height="calc(100vh - 65px - 60px - 30px - 172px - 119px)">
        <el-table-column type="index"
                         label="序号"
                         width="110"></el-table-column>
        <el-table-column prop="rfRuralName"
                         label="农村名称"></el-table-column>
        <el-table-column prop="statisticsYear"
                         label="年份"></el-table-column>
        <!-- <el-table-column prop="typeName"
                         label="建设标准类型名称">
        </el-table-column> -->
        <el-table-column prop="totalScore"
                         label="测评分">
        </el-table-column>
        <el-table-column prop="approvalState"
                         label="审批状态">
          <template slot-scope="{row}">
            <div>{{row.approvalState | approvalStateName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="110">
          <template slot-scope="{ row }">
            <el-button style="padding: 0"
                       type="text"
                       @click="handleApproval(row)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer-page">
        <Page v-model="pageInfo"
              @change="getPageList()" />
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageInfo: { // 分页基础参数
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      searchConfig: {
        statisticsYear: {
          name: "年份",
          type: "date",
          placeholder: "请输入年份",
          value: '',
          dateType: 'year',
          valueFormat: 'yyyy'
        }
      },
      formData: {},
      tableData: [],
      loading: false,
      pageListName: 'getPageList'
    }
  },
  components: {
    Page: () => import('@/components/Page')
  },
  created () {
    this.getPageList()
  },
  filters: {
    approvalStateName (value) {
      const name = ['待审批', '审批通过', '审批不通过']
      return name[value]
    }
  },
  methods: {
    searchChange (search) {
      this.searchForm = search
      this.pageInfo.pageNo = 1
      this.getPageList()
    },
    getPageList () {
      this.loading = true
      const { pageNo, pageSize } = this.pageInfo
      this.$Ajax(
        "/ruralProjectEvaluationApproval/pageApproval",
        "post",
        {
          pageNum: pageNo,
          pageSize: pageSize,
          ...this.formData,
          ...this.searchForm
        },
        (res) => {
          this.tableData = res.data.list
          this.pageInfo.total = res.data.total
          this.loading = false
        }
      )
    },
    handleApproval (row) {
      row && row.id && localStorage.setItem('id', row.id)
      row && row.statisticsYear && localStorage.setItem('statisticsYear', row.statisticsYear)
      this.$router.push('/rural_project_evaluation_approval/approval')
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
@import "@/assets/style/element-variables.scss";
</style>
